
import React,{Component,PropTypes} from 'react'
import TextInput from './TextInput'
import { Link } from 'react-router'
import Table from './Table'
import style from './addStore.css'
import {myAjax, ROOTURL} from './../publicAPI/publicAPI'
import SelectInput from './SelectInput'
class AreamanagerEditorShop extends Component {
    constructor(props, context) {
        super(props, context);

        // 存在密码保护问题
        this.state = {
            shops: [],
            selectContracts:[],
            disabled:true,
            adminId:this.props.params.id
        };

        var url=ROOTURL+'region/assign/search.api'
        var userinfo= JSON.parse(localStorage.getItem('userInfo'))
        var token=userinfo.token

        fetch(url, {
            method : 'POST',
            mode: 'cors',
            headers: {
                "X-Cafune-Authentication":"SECRET",
                "X-Cafune-Session-Token":token
            },
            body: JSON.stringify({
            })
        }).then(res=>{
            if(res.ok){
                res.json().then(data=>{
                    console.log(data);
                    this.setState({
                        selectContracts:data
                    })
                    console.log(this.state.selectContracts)
                    this.initshop();
                })
            }else{
                res.json().then(data=>{
                    alert(data.msgl10n)
                })
            }
        })
    }

    componentWillMount(){

        
    }

    initshop(){
        var url = ROOTURL + 'shop/search.api'
        fetch(url, {
            method : 'POST',
            mode: 'cors',
            body: JSON.stringify({
                "where":{"dd":[["eq",false]]}
            })
        }).then(res=>{
            if(res.ok){
                res.json().then(data=>{
                    console.log(data);
                    this.setState({
                        shops:data
                    })
                })
            }else{
                res.json().then(data=>{
                    alert(data.msgl10n)
                })
            }
        })
    }

    changeshop(){
        this.setState({
            disabled:false,
        })
    }
    saveshop(){
       window.location.href = '/Areamanager';  
    } 
    //复选框
    handleSelect(e) {
        let cId = e.target.value
        let isChecked = e.target.checked

        if(e.target.checked) {
            this.addshop(cId)
        } else {
            this.delectshop(cId)
        }
    }
    addshop(cId){
        var shopurl=ROOTURL+'region/assign/instance.api'
        fetch(shopurl, {
            method : 'POST',
            mode: 'cors',
            header: 'application/json; charset=utf-8',
            body: JSON.stringify({
                "shop":cId,
                "admin":this.state.adminId
            })
        }).then(res=>{
            if(res.ok){
                res.json().then(data=>{
                    console.log(data);
                    console.log(res);
                    var shoplist=[]
                    shoplist=this.state.selectContracts
                    shoplist.push(data)
                    this.setState({
                        selectContracts:shoplist
                    })
                    console.log(this.state.selectContracts)
                })
            }else{
                alert('添加管辖门店失败');
            }
        })
    }

    delectshop(cId){
        var id
        this.state.selectContracts.map(function(e){
            if(e.shopId==cId)
                id=e.id
        })
        var shopurl=ROOTURL+'region/assign/instance.api?id='+id
        fetch(shopurl, {
            method : 'DELETE',
            mode: 'cors',
            header: 'application/json; charset=utf-8',
        }).then(res=>{
            if(res.ok){
                res.json().then(data=>{
                    console.log(data);
                    console.log(res);
                    console.log(this.state.selectContracts)
                })
            }else{
                alert('删除管辖门店失败');
            }
        })
    }


    tHead() {
        var data = [
            {name: ""},
            {name: "商店名称"},
        ];
        const _headArr = [];
        const _width = {
            "0": "25%",
            "1": "75%",
        };
        _headArr.push(data.map((item, index) => <th style={{width: _width[index]}} role="1"
                                                    key={index}>{item.name}</th>));
        return _headArr;
    }

    tBody() {
        var _this=this
        var select=[]
        var selected=false
        select.push(this.state.shops.map(function(item){
                        selected=false
                        _this.state.selectContracts.map(function(e){
                            if(e.adminId==_this.state.adminId){
                                if(e.shopId==item.id)
                                    selected=true;
                            }
                        })
                        if(selected==true){
                            console.log("cenggon")
                            return <tr key={item.id}>
                                        <td><input type="checkbox" value={item.id} defaultChecked="true" disabled={_this.state.disabled} onChange={(e) => _this.handleSelect(e)}/></td>
                                        <td>{item.dname}</td>
                                    </tr>   
                        }else{
                             return <tr key={item.id}>
                                        <td><input type="checkbox" value={item.id}  disabled={_this.state.disabled} onChange={(e) => _this.handleSelect(e)}/></td>
                                        <td>{item.dname}</td>
                                    </tr>   
                        }         
                   })
                )

        return select
    }

    render() {
        return (
            <div className="right-wapper">
                <div className="wrap">
                    <div className={style["Table_div"]}>
                        <h2 className="catagory">
                            <span className="cata-title">管辖门店</span>                       
                        </h2>
                        <div>
                            <Table tHead={this.tHead.bind(this)()} tBody={this.tBody.bind(this)()}/>
                        </div>
                    </div>
                    {this.state.disabled?
                        <button className={style["btn_blue"]} onClick={this.changeshop.bind(this)}>修改</button>:
                        <button className={style["btn_blue"]} onClick={this.saveshop.bind(this)}>保存</button>
                    }   
                    <Link to="/Areamanager" >
                        <button id="back" className={style["btn_blue"]}>返回</button>
                    </Link>
                </div>
            </div>
        )
    }
}


export default AreamanagerEditorShop